﻿<!DOCTYPE html>
<html>
<head>
    <title>Example 0</title>
    <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../js/knockout-2.1.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
<body>
    <h1>Sign in to the community day 2012!</h1>
    <p>Please provide your first and last name</p>
    <div>
        <p>
            <label>
                User name
            </label>
            <input class="first" data-bind="value: firstName" />
        </p>
        <p>
            <label>
                Last name
            </label>
            <input data-bind="value: lastName" />
        </p>
        <p>
            <label>
                Profile picture
            </label>
            <input data-bind="value: picture" />
        </p>
        <p>
            <label>
                Result
            </label>
            <span data-bind="text: (firstName() +' '+ lastName())"></span>
        </p>
    </div>

    <img class="avatar" src="" alt="" data-bind='attr: { src: picture }' />

    <div class="buttonholder">
        <img src="../images/metro.icons/white/heart.png" onclick="document.location.href='/'" />
    </div>


    <script type="text/javascript">
        $(document).ready(function () {
            var ViewModel = function (userName, lastName, picture) {
                this.firstName = ko.observable(userName);
                this.lastName = ko.observable(lastName);
                this.picture = ko.observable(picture);
            };

            ko.applyBindings(new ViewModel("Chuck", "Norris", "../images/metro.icons/white/upload.png"));
        });
    </script>

</body>
</html>
